<template>
  <div class="content">
    <div class="top">
      <el-form inline :model="form">
        <el-form-item label="开始时间">
          <el-date-picker
            type="datetime"
            placeholder="选择开始时间"
            v-model="form.startTime"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions0"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="datetime"
            placeholder="选择结束时间"
            v-model="form.endTime"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions0"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getDataLists"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="list" class="el-table-box">
        <el-table-column
          label="测点名称"
          prop="monitorName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="测点编号"
          prop="monitorCode"
          align="center"
        ></el-table-column>
        <el-table-column
          label="数值(m)"
          prop="data"
          align="center"
        ></el-table-column>
        <el-table-column
          label="数据时间"
          prop="theDate"
          align="center"
        ></el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <!-- <el-col :span="23"> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[5, 10]"
          :page-size="query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <!-- </el-col> -->
      </el-row>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getBeachDataByPage } from "../../../../api/Monitoring";
export default {
  name: "DataStatistics",
  props: {
    node: Object,
  },
  data() {
    return {
      form: {
        startTime: moment().subtract(2, "months").format("YYYY-MM-DD 00:00:00"),
        endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      query: {
        page: 1,
        pagesize: 10,
      },
      total: null,
      list: [],
    };
  },
  methods: {
    async getDataList() {
      let queryData = {
        startTime: moment(this.form.startTime).format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD HH:mm:ss"),
      };
      const res = await getBeachDataByPage({
        monitorCode: this.node.monitorCode,
        monitorId: this.node.id,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        endTime: queryData.endTime,
        startTime: queryData.startTime,
      });
      if (res.resultCode == "200") {
        this.total = res.parameter.total;
        this.list = res.parameter.list;
        this.list.forEach((item) => {
          item.data = item.data.toFixed(3);
        });
      } else if (res.resultCode == "204") {
        this.query.page = 1;
        this.query.pagesize = 10;
        this.$message({
          message: "暂无数据",
          offset: 450,
          duration: 1000,
        });
      }
    },
    getDataLists() {
      this.getDataList();
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getDataList();
    },
  },
  created() {
    this.getDataList();
  },
};
</script>

<style scoped>
.content {
  height: 83vh;
  overflow: auto;
}
</style>

<style>
.small-table td,
.small-table th {
  padding: 8px 0;
}
.small-table th {
  font-size: 14px;
}
.small-table th > .cell,
.small-table td > .cell {
  line-height: 16px;
}
.el-form-item {
  margin-bottom: 0;
}
.el-pagination {
  float: right;
  margin-top: 10px;
}
.el-table-box {
  display: block;
  height: 70vh;
  overflow-y: auto;
  margin-bottom: 20px;
}
.el-table::before { z-index: inherit; }
</style>
